<template>
  <div class="Loading">
    <div class="Loading-panel">
      <div class="Loading-panel-title">
        <span>2023 CCF 全国电动汽车远程在线故障诊断技能大赛</span>
      </div>
      <div class="Loading-panel-title-two">
        <span>在线报名系统</span>
      </div>
      <div class="Loading-panel-school">
        <div class="Loading-panel-school-name">
          <span>学 校 名 称 :</span>
        </div>
        <div class="Loading-panel-school-input">
          <el-input v-model="schoolname" :disabled="edit" placeholder="请填写正确、完整的学校名称"></el-input>
        </div>
      </div>
      <div class="Loading-panel-username">
        <div class="Loading-panel-username-ipone">
          <span>手 机 号 码 :</span>
        </div>
        <div class="Loading-panel-username-input">
          <el-input
            v-model="username"
            @blur="Blur"
            @focus="Focus"
            type="text"
            autofocus
          ></el-input>
        </div>
      </div>
      <div class="Loading-panel-getcode">
        <el-button type="primary" @click="GetCode()">{{timecode}}</el-button>
      </div>
      <div class="Loading-panel-password">
        <div class="Loading-panel-password-code">
          <span>验 证 码 :</span>
        </div>
        <div class="Loading-panel-password-input">
          <el-input v-model="password" @focus="Focus"></el-input>
        </div>
      </div>
      <div class="Loading-panel-loading">
        <el-button type="primary" @click="Loading" v-preventReClick>注册登录</el-button>
      </div>
      <div class="Error-ipone" v-show="erroripone">
        <span>请输入正确的手机号码</span>
      </div>
      <div class="Error-empty-ipone" v-show="errorempty">
        <span>请填写手机号码</span>
      </div>
      <div class="Error-empty-code" v-show="erroricode">
        <span>请填写验证码或输入正确的验证码</span>
      </div>
      <div class="Error-empty-school" v-show="errorshcool">
        <span>请输入学院名称</span>
      </div>
    </div>
  </div>
</template>
<script>
import { postData } from "../assets/js/pubilcs.js";
export default {
  name: "Loading",
  components: {},
  props: {},
  directives: {
    // v-part
    preventReClick: {
      // 指令的定义
      inserted(el, binding) {
        // el.focus()
        // console.log('自定义局部指令注册成功！');
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 800);
          }
        });
      },
    },
  },
  data() {
    return {
      schoolname: "",
      username: localStorage.getItem("username"),
      password: "",
      code: "",
      timecode: "获取验证码",
      time: "",
      timeCount: 60,
      clikcboolean: false,
      errorempty: false,
      erroripone: false,
      erroricode: false,
      errorshcool: false,
      edit: false
    };
  },
  methods: {
    GetCode() {
      let self = this;
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (self.clikcboolean) {
        return;
      }
      if (self.username === "") {
        self.errorempty = true;
        return;
      } else if (reg.test(self.username) === false) {
        self.erroripone = true;
        return;
      }
      self.clikcboolean = true;
      self.time = setInterval(function() {
        self.timeCount -= 1;
        if (self.timeCount === 0) {
          self.timecode = "获取验证码";
          (self.timeCount = 60), (self.clikcboolean = false);
          clearTimeout(self.time);
        } else {
          self.timecode = self.timeCount + "秒后获取";
        }
      }, 1000);
      postData(
        "/api/Account/SMSAuthent",
        JSON.stringify({
          PhoneNumbers: self.username
        })
      )
        .then(function(res) {
          //console.log(res);
          if (res.success) {
            // console.log(res);
            // console.log(res.result);
            self.code = res.result;
          }
        })
        .catch(error => {});
    },
    Blur() {
      let self = this;
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (self.username === "") {
        self.errorempty = true;
      } else if (reg.test(self.username) === false) {
        self.erroripone = true;
        self.errorempty = false;
      } else if (self.username.length < 11 || self.username.length > 11) {
        self.erroripone = true;
        self.errorempty = false;
      }
      if (reg.test(self.username)) {
        self.errorempty = false;
        self.erroripone = false;
        postData(
          "/api/Registration/GetSchoolByPhoneNumber",
          JSON.stringify({
            PhoneNumber: self.username
          })
        )
          .then(function(rep) {
            // console.log(rep);
            if (rep.msg === "未找到注册的学校") {
              self.schoolname = "";
              self.edit = false;
            } else {
              self.schoolname = rep.result;
              self.edit = true;
              sessionStorage.set("schoolname", rep.result);
            }
          })
          .catch(error => {});
      }
      // self.errorempty=false
      // self.erroripone = false;
    },
    Focus() {
      // this.errorempty=false
      //this.erroripone=false
      // this.erroricode=false
    },
    Loading() {
      let self = this;
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (self.password === "") {
        self.erroricode = true;
        return 
      }
      if (self.username === "") {
        self.errorempty = true;
        return 
      }
      if (self.password !== self.code.toString()) {
        self.erroricode = true;
        return 
      }
      if (self.schoolname === "") {
        self.errorshcool = true;
        return 
      }
      // localStorage.setItem("schoolname",self.schoolname)
      //       localStorage.setItem("username",self.username)
      //        self.$router.push({
      //       name: "Details"
      //   });
      if (
        self.password === self.code.toString() &&
        self.password !== "" &&
        self.schoolname!== "" &&
        reg.test(self.username)
      ) {
        postData(
          "/api/Registration/Login",
          JSON.stringify({
            PhoneNumber: self.username,
            School: self.schoolname,
            Year:2023
          })
        )
          .then(function(res) {
            // console.log(res);
            if (res.success) {
              localStorage.setItem("schoolname", self.schoolname);
              localStorage.setItem("username", self.username);
              self.$router.push({
                name: "Details"
              });
            }
          })
          .catch(error => {
            console.log(error)
          });
      }
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    clearTimeout(self.time);
  }
};
</script>
<style spcoed lang="less">
html{
  overflow-y: hidden;
}
.Loading {
  position: relative;
  width: 1920px;
  height: 1080px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#141e30, #243b55);
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
}
.Loading-panel {
  position: relative;
  width: 700px;
  height: 600px;
  border-radius: 15px;
  background: rgba(36, 59, 85, 1);
}
.Loading-panel-title,
.Loading-panel-title-two {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #ffffff;
}
.Loading-panel-title-two {
  top: 100px;
}
.Loading-panel-username,
.Loading-panel-password,
.Loading-panel-school {
  position: absolute;
  left: 100px;
  width: 100%;
  height: 40px;
}
.Loading-panel-username {
  top: 200px;
}
.Loading-panel-school {
  top: 280px;
}
.Loading-panel-password {
  top: 360px;
}
.Loading-panel-username-ipone,
.Loading-panel-password-code,
.Loading-panel-school-name {
  position: absolute;
  width: 120px;
  height: 40px;
  left: 20px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: #ffffff;
}
.Loading-panel-username-input,
.Loading-panel-password-input,
.Loading-panel-school-input {
  position: absolute;
  left: 160px;
}
.Loading-panel-username-input .el-input,
.Loading-panel-school-input .el-input {
  font-size: 20px;
  width: 300px;
}
.Loading-panel-password-input .el-input {
  width: 190px;
  font-size: 20px;
}
.Loading-panel-getcode {
  position: absolute;
  top: 360px;
  right: 140px;
  height: 40px;
  z-index: 999;
  cursor: pointer;
}
.Loading-panel-getcode .el-button {
  width: 100px;
  height: 40px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Loading-panel-loading {
  position: absolute;
  bottom: 70px;
  width: 100%;
  height: 60px;
  left: 260px;
  display: flex;
  align-items: center;
}
.Loading-panel-loading .el-button {
  width: 300px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
}
.Error-ipone,
.Error-empty-ipone,
.Error-empty-code,
.Error-empty-school {
  position: absolute;
  width: 100%;
  height: 30px;
  color: red;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  bottom: 325px;
  font-size: 16px;
  left: 260px;
}
.Error-empty-code {
  bottom: 166px;
}
.Error-empty-school{
  bottom: 245px;
}
</style>
